{% extends "base.tmpl" %}
{% block title %} Mozilla Labs : TogetherJS app integration example {% endblock %}
{# set enableExample true #}
{% block configs %}
  <script>
    var TogetherJSConfig_autoStart = true;
    var TogetherJSConfig_suppressJoinConfirmation = true;
    var TogetherJSConfig_dontShowClicks = ":not(canvas"
  </script>
{% endblock %}
{% block body %}
  {% block styles %}
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
  {% endblock %}

  <div class="container">
    <section class="body-content row" id="sketchapp" style="margin-left: 0px; margin-right: 0px;">
        <h1 style="margin-bottom: 20px">Drawing Example</h1>
        <a class="pull-right tjsbutton" onclick="TogetherJS(this); return false;">
          <img src="https://togetherjs.com/images/start-togetherjs-blue.png" style="width: 125px;"></img>
        </a>
        <p class="pull-left" style="margin-bottom: 20px">This is a simple drawing example.  Try drawing something with a friend in the canvas below!  Check out this code on <a href="http://jsfiddle.net/5f8FL/1/" target="_blank">JSFiddle  here</a>.</p>
        <div class="btn-group btn-group-justified" style="margin-left: auto; margin-right: auto;">
          <a class="btn btn-info color-picker upper-button">Blue</a>          
          <a class="btn btn-success color-picker">Green</a>
          <a class="btn btn-warning color-picker">Yellow</a>
          <a class="btn btn-danger color-picker">Red</a>
          <a class="btn btn-success color-picker black-pick upper-button" style="border-bottom-width: 0px;">Black</a>
        </div>
        <div class="clearfix"></div>
        <div id="sketchContainer" style="width: 100%; border: 1px solid rgba(0,0,0,0.2);">
          <canvas id="sketch"></canvas>
        </div>
        <div class="btn-group btn-group-justified" style="margin-left: auto; margin-right: auto;">
          <a class="btn btn-info user-color-pick bottom-button" style="width: 35%;">User Color</a>
          <a class="btn btn-success plus-size" style="width: 15%;">
            <i class="fa fa-plus-square"></i>
          </a>
          <a class="btn btn-warning clear" style="width: 15%;">
            <i class="fa fa-times-circle"></i>
          </a>
          <a class="btn btn-danger minus-size" style="width: 15%;">
            <i class="fa fa-minus-square"></i>
          </a>
          <a class="btn btn-default eraser bottom-button" style="width: 35%; border-top-width: 0px;">
            <i class="fa fa-eraser"></i>
          </a>
       </div>
    </section>
  </div>

  <script src="js/sketch.js"></script>
{% endblock %}
